热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

都会|坏处_[JS入门到进阶]手写解析uin8数组的工具:解析二进制字节,太快太方便了!

篇首语:本文由编程笔记#小编为大家整理,主要介绍了[JS入门到进阶]手写解析uin8数组的工具:解析二进制字节,太快太方便了!相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了[JS入门到进阶] 手写解析uin8数组的工具:解析二进制字节,太快太方便了!相关的知识,希望对你有一定的参考价值。




背景

我常常需要处理二进制数据,每次面对一堆二进制数据,需要自己逐个字节转换为二进制、十六进制,去阅读和理解,去排查问题。

举个例子:有一个场景是我的《我做了个《联机桌游合集: UNO+斗地主+五子棋》无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!》,我使用websocket传输二进制数据,我使用protocol buffer作为序列化协议。所有变量的值都用二进制表示,变量名也被用数字表示,体积很小。(另一种常见的序列化协议是JSON,它是基于文本的序列化协议,空间利用率低,所以常常需要压缩)



  • 使用二进制的好处:空间利用率高,节约带宽,提升速度。

  • 使用二进制的坏处:调试难度高,开发成本高。


诉求

二进制的数据,通常用uin8数组表示。8个二进制位就表示一个byte(十进制的值为0-255,即十六进制的00至FF)。我们调试二进制数据时,也常常看到诸如43 6c 6f 73表示的数据,这是十六进制,每2位十六进制,就代表了一个byte。当然,也有时候使用十进制打印的。

但是十进制、十六进制,都不能满足诉求。

有时候我们需要以二进制表示,直观看清每一位的值。有时候我们需要把整体作为一个整数(例如整体作为uint32),看看它的值。有时候我们需要把每位按照ASCII转换为字符串,也许它是有语义的。


分享工具

网上有些现成的进制转换工具,但都不好用。而且有广告,比较慢。

所以我自己做了一个工具: https://tool.hullqin.cn/byte-parser.html

特性如下:



  • 支持「十进制表示的uint8数组、二进制表示的uint8数组、十六进制表示的uint8数组、整体作为数字、ASCII数组」互相转换。任意输入一项,只要合法,其它项都会自动生成,并且格式化,并且生成的结果你可以随意编辑,再次转换。

  • 如果出错,有错误提示,并保留上一次结果。

  • 如果字节过多(超过6),那么(整体的值)10进制意义不大,就不再计算了。

  • 如果有一个字节不是合法的ASCII,就认为ASCII无意义,就不再计算了。

  • 轻量级、开源,不到200行代码,如有定制化需求,可fork代码后修改。


如何开发

核心html































提前做好dom查询,存储下来,避免以后再查:

let bytes = [];
const bytesEle =
2: document.getElementById(bytes-2),
10: document.getElementById(bytes-10),
16: document.getElementById(bytes-16),
;
const valueIntEle = document.getElementById(value-int);
const valueAsciiEle = document.getElementById(value-ascii);
const messageEle = document.getElementById(message);
const pad =
2: 8,
16: 2,
10: 0,
;

手写setter,即设置bytes的函数:

const setBytes = (value) =>
bytes = value;
console.log(bytes);
Object.keys(bytesEle).forEach(radix =>
const ele = bytesEle[radix];
ele.value = bytes.map(i => i.toString(radix).padStart(pad[radix], 0).padStart(8, )).join( )
);
if (bytes.length > 6)
valueIntEle.value = ;
else
valueIntEle.value = bytes.map((i, index) => i * (256 ** (bytes.length - 1 - index))).reduce((a, b) => a + b).toString();

if (bytes.every(i => (i === 10 || i > 31) && i <127))
valueAsciiEle.value = String.fromCharCode(...bytes);
else
valueAsciiEle.value = ;

;

手写click触发的事件,根据输入内容,生成bytes,然后调用setBytes,触发视图更新:

const changeBytesByUin8 = (value, radix) =>
const newBytes = value.split(/[^\\da-fA-F]+/).filter(i => i !== ).map(i => parseInt(i.trim(), radix));
if (newBytes.findIndex(i => Number.isNaN(i) || i >= 256) >= 0)
throw new Error(解析失败);

setBytes(newBytes);
;
const changeBytesByInt = (value) =>
let num = Number(value.trim());
if (Number.isNaN(num))
throw new Error(解析失败);

const result = [];
while (num > 0)
result.splice(0, 0, num % 256);
num = Math.floor(num / 256);

setBytes(result);
;
const changeBytesByAscii = (value) =>
const result = Array.from(value).map(i => i.charCodeAt(0));
if (result.findIndex(i => i > 256) >= 0)
throw new Error(解析失败);

setBytes(result);
;

把事件绑定到dom上:

const onUint8ValueChange = (radix) => (event) =>
try
messageEle.innerText = ;
changeBytesByUin8(event.target.value.trim(), radix);
catch (e)
messageEle.innerText = e.message;

Object.keys(bytesEle).forEach(radix =>
bytesEle[radix].addEventListener(change, onUint8ValueChange(radix));
);

体验地址 & 源码

体验地址: https://tool.hullqin.cn/byte-parser.html

源码: https://github.com/HullQin/tool-hullqin-cn


写在最后

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。


推荐阅读
  • 深入理解Redis的数据结构与对象系统
    本文详细探讨了Redis中的数据结构和对象系统的实现,包括字符串、列表、集合、哈希表和有序集合等五种核心对象类型,以及它们所使用的底层数据结构。通过分析源码和相关文献,帮助读者更好地理解Redis的设计原理。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • python的交互模式怎么输出名文汉字[python常见问题]
    在命令行模式下敲命令python,就看到类似如下的一堆文本输出,然后就进入到Python交互模式,它的提示符是>>>,此时我们可以使用print() ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细解析了Python中的os和sys模块,介绍了它们的功能、常用方法及其在实际编程中的应用。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • VPX611是北京青翼科技推出的一款采用6U VPX架构的高性能数据存储板。该板卡搭载两片Xilinx Kintex-7系列FPGA作为主控单元,内置RAID控制器,支持多达8个mSATA盘,最大存储容量可达8TB,持续写入带宽高达3.2GB/s。 ... [详细]
  • 基于KVM的SRIOV直通配置及性能测试
    SRIOV介绍、VF直通配置,以及包转发率性能测试小慢哥的原创文章,欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 本文详细介绍如何在VSCode中配置自定义代码片段,使其具备与IDEA相似的代码生成快捷键功能。通过具体的Java和HTML代码片段示例,展示配置步骤及效果。 ... [详细]
  • 深入解析JMeter中的JSON提取器及其应用
    本文详细介绍了如何在JMeter中使用JSON提取器来获取和处理API响应中的数据。特别是在需要将一个接口返回的数据作为下一个接口的输入时,JSON提取器是一个非常有用的工具。 ... [详细]
author-avatar
Gome--李想
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有